<template>
    <div class="poa messagebig">
        <div class="title">
            消息
            <div @click="people_list_fn" class="lianxiren">
                联系人
            </div>
        </div>
        <div class="message_bar">
            <div @click="message_router('message_fan')">
                <div class="fensi">
                    <div class="content">
                        <icon_people />
                    </div>
                </div>
                <div class="text">
                    粉丝
                </div>
            </div>
            <div @click="message_router('message_like')">
                <div class="zan">
                    <div class="content zanc">
                        <icon_love />
                    </div>
                </div>
                <div class="text">
                    赞
                </div>
            </div>
            <div @click="message_router('message_at')">
                <div class="aite">
                    <div class="content aic">
                        <icon_aite />
                    </div>
                </div>
                <div class="text">
                    @我的
                </div>
            </div>
            <div @click="message_router('message_comment')">
                <div class="message">
                    <div class="content">
                        <icon_message />
                    </div>
                </div>
                <div class="text">
                    评论
                </div>
            </div>
        </div>
        <people_big v-model:flag="people_flag" />
        <img src="../assets/null.jpg" class="null">
    </div>
</template>
<script setup>
import { defineAsyncComponent, ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const people_big = defineAsyncComponent(() => import('../components/common/people_list.vue'))
const icon_people = defineAsyncComponent(() => import('../components/common/icon_people.vue'))
const icon_love = defineAsyncComponent(() => import('../components/common/little_love.vue'))
const icon_aite = defineAsyncComponent(() => import('../components/common/icon_aite.vue'))
const icon_message = defineAsyncComponent(() => import('../components/common/icon_message.vue'))
let people_flag = ref(false)
function people_list_fn() {
    people_flag.value = true
}
function message_router(path) {
    router.push(
        {
            path: path
        }
    )
}
</script>
<style scoped lang="scss">
@function r($v) {
    @return $v / (390 / 10rem)
}

.null {
    width: 100%;
}

.message_bar {
    margin: r(10);
    border-bottom: 1px solid #262732;
    padding-bottom: r(15);
    display: flex;
    justify-content: space-around;

    >div {
        display: flex;
        flex-direction: column;

        >div {
            width: r(40);
            height: r(40);
            position: relative;
        }

        .content {
            width: r(20);
            height: r(20);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .aite {
            background-color: #1cc262;

            .aic {
                margin-left: r(1);
                margin-top: r(-2);
            }
        }

        .message {
            background-color: #a753ec;
        }

        .zan {
            background-color: #f8355f;

            .zanc {
                width: r(12);
                height: r(12);
                margin-top: r(2);
            }
        }

        .fensi {
            background: #4f88fb;
            position: relative;
        }

        .text {
            color: #fff;
            font-size: r(10);
            text-align: center;
            margin-top: r(3);
            height: unset;
        }
    }
}

.title {
    height: r(44);
    text-align: center;
    position: relative;
    font-size: r(16);
    color: #fff;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    border: 1px solid #222;
}

.lianxiren {
    position: absolute;
    right: 0;
    font-size: r(16);
    display: flex;
    align-items: center;
    height: 100%;
    margin-right: r(20);
    color: #fff;
}

.messagebig {
    background-color: #161622;
}
</style>